<template>
  <view class="login-container">
    <view class="login-header">
      <text class="title">手机验证码登录</text>
      <text class="subtitle">请输入手机号获取验证码登录</text>
    </view>
    
    <view class="login-form">
      <!-- 手机号输入框 -->
      <view class="input-group">
        <view class="input-label">手机号</view>
        <view class="input-wrapper">
          <input
            class="input"
            type="number"
            v-model="phoneNumber"
            placeholder="请输入手机号码"
            maxlength="11"
            placeholder-style="color: #cccccc"
          />
        </view>
      </view>
      
      <!-- 验证码输入框 -->
      <view class="input-group">
        <view class="input-label">验证码</view>
        <view class="input-wrapper with-code">
          <input
            class="input"
            type="number"
            v-model="verificationCode"
            placeholder="请输入验证码"
            maxlength="6"
            placeholder-style="color: #cccccc"
          />
          <view class="code-btn" :class="{ disabled: isCounting }" @tap="sendVerificationCode">
            {{ countdownText }}
          </view>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <view class="login-btn" :class="{ disabled: !canLogin }" @tap="handleLogin">
        登录
      </view>
      
      <!-- 协议同意 -->
      <view class="agreement">
        <text class="agreement-text">登录即表示您已同意</text>
        <text class="agreement-link">《用户协议》</text>
        <text class="agreement-link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '', // 手机号
      verificationCode: '', // 验证码
      isCounting: false, // 是否正在倒计时
      countdown: 60, // 倒计时秒数
      countdownTimer: null // 倒计时定时器
    }
  },
  computed: {
    // 计算倒计时显示文本
    countdownText() {
      return this.isCounting ? `${this.countdown}s后重新获取` : '获取验证码'
    },
    // 是否可以登录（手机号和验证码格式正确）
    canLogin() {
      return this.isPhoneValid && this.verificationCode.length === 6
    },
    // 手机号格式验证
    isPhoneValid() {
      return /^1[3-9]\d{9}$/.test(this.phoneNumber)
    }
  },
  methods: {
    // 发送验证码
    sendVerificationCode() {
      // 防止重复点击
      if (this.isCounting) return
      
      // 验证手机号格式
      if (!this.isPhoneValid) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      // 调用发送验证码API
      uni.showLoading({
        title: '发送中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        // 这里替换为实际的API调用
        // uni.request({
        //   url: '你的API地址',
        //   method: 'POST',
        //   data: {
        //     phone: this.phoneNumber
        //   },
        //   success: (res) => {
        //     if (res.data.success) {
        //       this.startCountdown()
        //       uni.showToast({
        //         title: '验证码发送成功',
        //         icon: 'success'
        //       })
        //     } else {
        //       uni.showToast({
        //         title: res.data.message || '验证码发送失败',
        //         icon: 'none'
        //       })
        //     }
        //   },
        //   fail: () => {
        //     uni.showToast({
        //       title: '网络错误，请重试',
        //       icon: 'none'
        //     })
        //   }
        // })
        
        // 模拟成功发送
        this.startCountdown()
        uni.showToast({
          title: '验证码发送成功',
          icon: 'success'
        })
      }, 1000)
    },
    
    // 开始倒计时
    startCountdown() {
      this.isCounting = true
      this.countdown = 60
      
      this.countdownTimer = setInterval(() => {
        this.countdown--
        
        if (this.countdown <= 0) {
          clearInterval(this.countdownTimer)
          this.isCounting = false
        }
      }, 1000)
    },
    
    // 处理登录
    handleLogin() {
      if (!this.canLogin) {
        if (!this.isPhoneValid) {
          uni.showToast({
            title: '请输入正确的手机号码',
            icon: 'none'
          })
        } else if (this.verificationCode.length !== 6) {
          uni.showToast({
            title: '请输入6位验证码',
            icon: 'none'
          })
        }
        return
      }
      
      uni.showLoading({
        title: '登录中...'
      })
      
      // 模拟登录API请求
      setTimeout(() => {
        uni.hideLoading()
        // 这里替换为实际的登录API调用
        // uni.request({
        //   url: '你的登录API地址',
        //   method: 'POST',
        //   data: {
        //     phone: this.phoneNumber,
        //     code: this.verificationCode
        //   },
        //   success: (res) => {
        //     if (res.data.success) {
        //       // 登录成功，存储token等操作
        //       uni.setStorageSync('token', res.data.token)
        //       uni.showToast({
        //         title: '登录成功',
        //         icon: 'success'
        //       })
        //       
        //       // 跳转到首页或上一页
        //       setTimeout(() => {
        //         uni.navigateBack()
        //       }, 1500)
        //     } else {
        //       uni.showToast({
        //         title: res.data.message || '登录失败',
        //         icon: 'none'
        //       })
        //     }
        //   },
        //   fail: () => {
        //     uni.showToast({
        //       title: '网络错误，请重试',
        //       icon: 'none'
        //     })
        //   }
        // })
        
        // 模拟登录成功
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 跳转到首页或上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  },
  
  // 页面卸载时清除定时器
  beforeUnmount() {
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  padding: 60rpx 60rpx 0;
  min-height: 100vh;
  background-color: #ffffff;
  box-sizing: border-box;
}

.login-header {
  margin-bottom: 80rpx;
  
  .title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #999999;
  }
}

.input-group {
  margin-bottom: 40rpx;
  
  .input-label {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 20rpx;
    font-weight: 500;
  }
  
  .input-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    padding-bottom: 20rpx;
    
    &.with-code {
      justify-content: space-between;
    }
    
    .input {
      flex: 1;
      height: 80rpx;
      font-size: 32rpx;
      color: #333333;
    }
    
    .code-btn {
      padding: 10rpx 24rpx;
      background-color: #007AFF;
      color: #ffffff;
      border-radius: 8rpx;
      font-size: 24rpx;
      
      &.disabled {
        background-color: #cccccc;
        color: #999999;
      }
    }
  }
}

.login-btn {
  margin-top: 80rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #007AFF;
  color: #ffffff;
  border-radius: 44rpx;
  font-size: 32rpx;
  
  &.disabled {
    background-color: #cccccc;
    color: #999999;
  }
}

.agreement {
  margin-top: 40rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999999;
  
  .agreement-link {
    color: #007AFF;
  }
}
</style>